<template>
  <div>
    <common-head title="商品详情"/>
    <div class="wrap">
      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
      <van-swipe-item v-for="banner in detail.pics" :key="banner.id">
        <img :src="banner.pic" alt="">
      </van-swipe-item>
    </van-swipe>
      <h3 v-if="detail.basicInfo">
        {{detail.basicInfo.name}}
      </h3>
      <div class="rich-text" v-html="content"></div>
    </div>
    <!-- 商品行动栏 -->
    <van-goods-action>
      <van-goods-action-icon
        to="/home"
        icon="wap-home-o" text="首页"  />
      <van-goods-action-icon
        to="/cart"
        icon="cart-o" text="购物车" :badge="items.length||''" />
      <van-goods-action-button @click="showSku(0)" type="warning" text="加入购物车" />
      <van-goods-action-button @click="showSku(1)" type="danger" text="立即购买" />
    </van-goods-action>
    <!-- /商品行动栏 -->
    <!-- 弹出商品sku -->
    <van-popup
      v-model="show"
      closeable
      round
      position="bottom"
      :style="{ height: '30%',background:'#fafafa' }"
    >
      <van-card
        :num="sku.num"
        :price="sku.minPrice"
        :title="sku.name"
        :thumb="sku.pic"
      >
        <template #footer>
          <van-stepper v-model="sku.num" />
        </template>
      </van-card>
      <van-button @click="action" round color="linear-gradient(to right, #ff6034, #ee0a24)" size="large">确定</van-button>
    </van-popup>
    <!-- /弹出商品sku -->
  </div>
</template>

<script>
import { fetchItemDetail } from '@api'
import CommonHead from '@components/CommonHead'
import { Toast } from 'vant'
export default {
  data () {
    return {
      show: false,
      detail: {
        content: ''
      },
      status: 0,
      sku: {} // 商品规格
      // detail.basicInfo
    }
  },
  created () {
    this.fetchDetail()
  },
  methods: {
    addCart () {
      // 加入购物车
      // 判断购物车中是否已经存在该商品
      const items = this.$store.state.cart.items
      //  find findIndex
      const index = items.findIndex(el => el.id === this.sku.id)
      const item = { ...this.sku }
      if (index !== -1) {
        // 购物车中已经有该商品
      /*   Toast('购物车中已经有该商品请勿重复添加')
        return */

        this.$store.commit('cart/add_item_num_2', { index, num: item.num })
        Toast('成功加入购物车，请前往购买吧')
        this.show = false
        return
      }
      // 加入购物车的数据
      this.$store.commit('cart/add_cart', item)
      Toast('成功加入购物车，请前往购买吧')
      this.show = false
    },
    action () {
      if (this.status) {
        // 点击立即购买
        alert('立即购买')
      } else {
        this.addCart()
      }
    },
    showSku (n) {
      // 弹出商品规格弹出层
      this.show = true
      this.status = n
    },
    fetchDetail () { // 请求商品详情
      fetchItemDetail(this.$route.query.itemId).then(res => {
        console.log(res)
        if (res.data.code === 0) {
          this.detail = res.data.data
          this.sku = {
            ...res.data.data.basicInfo,
            num: 1,
            checked: true // 默认选中
          }
        }
      })
    }
  },
  computed: {
    content () {
      return this.detail.content.replace(/<img/g, '<img style="display:block;width:100%"')
    },
    items () {
      return this.$store.state.cart.items
    }
  },
  components: {
    CommonHead
  }
}
</script>

<style lang="scss" scoped>
.wrap{
  margin-top: 46px;
  .my-swipe{
    img{
      width: 100%;
    }
  }
}
/* .rich-text /deep/ img{
  display: block;
  width: 100%;
} */

</style>
